<template>
  <div>
    <el-row>
      <tableComponents
        :pagination="{ currentPage, pageSize, total: list.all_num }"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        @sendUserSearch="getSearch"
        :searchData="userSearchData"
        :isHaveAdd="false"
        exportUrl="/api/admin/export/recharge"
      >
        <template v-slot:table>
          <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="list.data"
            stripe
            header-row-class-name="head_color"
            tooltip-effect="dark"
            style="width: 99.8%"
          >
            <el-table-column label="头像" min-width="80">
              <template slot-scope="scope">
                <div class="img_bor_tx">
                  <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
                </div>
              </template>
            </el-table-column>

            <el-table-column label="用户信息" min-width="190">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>用户昵称：</span>
                    <span>{{ scope.row.nickname || "----" }}</span>
                  </div>
                  <div>
                    <span>会员账号：</span>
                    <span>{{ scope.row.username }}</span>
                  </div>
                  <div>
                    <span>用户等级：</span>
                    <span class="rat" v-show="scope.row.rating_cn">{{
                      scope.row.rating_cn
                    }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              label="操作员信息"
              min-width="160"
              v-if="
                $store.state.plugin &&
                $store.state.plugin.qyyy &&
                $store.state.plugin.qyyy.is_open == 1
              "
            >
              <template slot-scope="scope">
                <div
                  class="fx"
                  style="justify-content: flex-start"
                  v-if="scope.row.operate > 0"
                >
                  <div class="tc" style="margin-right: 20px">
                    <img
                      :src="$fnc.getImgUrl(scope.row.o_avatar)"
                      style="width: 50px; height: 50px"
                      class="user_img"
                    />
                  </div>
                  <div class="tab_div">
                    <div>
                      <span>账号/手机号：</span>
                      <span>{{ scope.row.o_username || "----" }}</span>
                    </div>
                    <div>
                      <span>昵称：</span>
                      <span>{{ scope.row.o_nickname || "----" }}</span>
                    </div>
                    <div>
                      <span>等级：</span>
                      <span class="rat" v-show="scope.row.o_rating_cn">{{
                        scope.row.o_rating_cn
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="user_table" v-else>无操作人员</div>
              </template>
            </el-table-column>

            <el-table-column label="订单" min-width="190">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>订单号：</span>
                    <span>{{ scope.row.oid }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="金额" min-width="190">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>充值金额：</span>
                    <span>
                      {{ scope.row.money | keepTwoNum }}
                      {{ scope.row.style_cn }}
                    </span>
                  </div>
                  <div>
                    <span>赠送金额：</span>
                    <span>
                      {{ scope.row.send | keepTwoNum }}
                      {{ scope.row.style_cn }}
                    </span>
                  </div>
                  <div>
                    <span>充值时间：</span>
                    <span>{{ scope.row.created_time | getTimeFormat }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="状态" min-width="180">
              <template slot-scope="scope">
                <div class="tab_div">
                  <div>
                    <span>充值方式：</span>
                    <span>{{ scope.row.pay }}</span>
                  </div>
                  <div>
                    <span>充值状态：</span>
                    <span
                      class="rat"
                      :class="[
                        scope.row.status == '支付成功' ? 'sh' : 'lei_red',
                      ]"
                      >{{ scope.row.status }}</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" min-width="100">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.offline"
                  :loading="$store.state.isLoading"
                  type="warning"
                  size="mini"
                  @click="
                    offline_img = scope.row.offline;
                    offline_show = true;
                  "
                  >线下付款凭证</el-button
                >
                <el-button
                  :loading="$store.state.isLoading"
                  type="primary"
                  size="mini"
                  @click="showEditDialog(scope.row.id)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template v-slot:footerLeft>
          <div class="recharge_sum">
            <p>
              <span>余额总计：</span>
              {{ list.count_ar.money_all }}
            </p>
            <p>
              <span>佣金总计：</span>
              {{ list.count_ar.amount_all }}
            </p>
            <p>
              <span>积分总计：</span>
              {{ list.count_ar.integral_all }}
            </p>
          </div>
        </template>
      </tableComponents>
      <RechargeEdit
        @parent="reload"
        :show.sync="show"
        :rechargeId="rechargeId"
      ></RechargeEdit>
      <el-dialog
        :close-on-click-modal="false"
        title="线下付款凭证"
        :lock-scroll="true"
        :visible.sync="offline_show"
        class="tc size_13"
        width="400px"
      >
        <el-image
          style="width: 300px"
          :src="offline_img"
          :preview-src-list="[offline_img]"
        >
        </el-image>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import switchc from "../currency/Swich";
import RechargeEdit from "@/components/user/RechargeEdit.vue";
import HeadTitle from "@/components/currency/HeadTitle.vue";
import rechargeSearch from "@/components/currency/rechargeSearch.vue";
import { userRechargeSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: userRechargeSearchData,
      status: "",
      recharge_sum: {
        money_all: "",
        amount_all: "",
        integral_all: "",
      },
      show: false,
      loading: false,
      list: {
        count_ar: {
          money_all: "",
          amount_all: "",
          integral_all: "",
        },
        data: [],
      },
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      rechargeId: "",
      searchAll: {},
      offline_img: "",
      offline_show: false,
    };
  },
  components: {
    switchc,
    RechargeEdit,
    HeadTitle,
    rechargeSearch,
  },
  methods: {
    get_sum() {
      this.$api.getUser.get_recharge_sum({}).then((res) => {
        if (res.data.code == 200) {
          this.recharge_sum = res.data.result;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    showEditDialog(id) {
      this.show = true;
      this.rechargeId = id;
    },
    reload(id) {
      this.getNewsAll(1);
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(1);
    },
    getNewsAll(page) {
      this.loading = true;
      var params = {};
      params = this.searchAll;
      params.page = page;
      params.page_size = this.pagesize;

      this.$api.getUser.getRechargeList(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getNewsAll(1);
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val);
      this.getNewsAll(this.currentPage);
    },
  },
  beforeCreate() {},
  created() {
    this.searchAll.status = this.$route.query.action || "";
    this.status = this.$route.query.action || "";
    this.getNewsAll(1);
  },
  computed: {},
  watch: {
    $route() {
      this.status = this.$route.query.action || "";
    },
    status() {
      this.searchAll.status = this.status;
      this.getNewsAll(1);
    },
  },
};
</script>

<style lang="less" scoped>
thead > tr > th {
  height: 45px;
  line-height: 45px;
}
td,
th {
  border: 1px solid #e1e3e4;
  font-size: 12px;
}
th {
  background: #f8f8f8;
  font-weight: normal;
  color: #323437;
}
td {
  height: 75px;
  color: #000;
}
.caozuo {
  padding-left: 50px;
}
.pl {
  padding-left: 15px;
}
.chkBox {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  background: #fff;
}
.aBtn_1 {
  padding: 10px;
}
.recharge_sum {
  width: 80%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.recharge_sum p {
  font-size: 14px;
  line-height: 32px;
  padding-right: 50px;
}
.recharge_sum span {
  font-size: 14px;
  font-weight: bold;
}
</style>
